<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 新增角色按钮 -->
        <el-row style="height: 60px">
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click.native="ShowDialog"
            >新增角色</el-button
          >
        </el-row>
        <!-- 表格 -->
        <el-table :data="peoplelist">
          <el-table-column label="序号" width="120" type="index" />
          <el-table-column label="角色名称" width="240" prop="name" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="success"
                @click.native="AssignPermissions(scope.row.id)"
                >分配权限</el-button
              >
              <el-button
                size="small"
                type="primary"
                @click.native="bianjiPeople(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click.native="deletPeople(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <!-- 分页组件 -->
          <el-pagination
            layout="prev,pager,next"
            :total="page.total"
            :current-page="page.page"
            :page-size="page.pagesize"
            @current-change="currentChange"
          />
        </el-row>
        <el-dialog :title="title" :visible.sync="showDialog">
          <el-form
            ref="roleForms"
            :model="roleForm"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="角色名称" prop="name">
              <el-input v-model="roleForm.name" />
            </el-form-item>
            <el-form-item label="角色描述">
              <el-input v-model="roleForm.description" />
            </el-form-item>
          </el-form>
          <!-- 底部 -->
          <el-row slot="footer" type="flex" justify="center">
            <el-col :span="6">
              <el-button size="small" @click.native="showDialog = false"
                >取消</el-button
              >
              <el-button size="small" type="primary" @click.native="btnOK"
                >确定</el-button
              >
            </el-col>
          </el-row>
        </el-dialog>
      </el-card>
    </div>
    <!-- 分配权限的弹层 -->
    <el-dialog
      title="分配权限(一级为路由页面查看权限-二级为按钮操作权限)"
      :visible="showAssignDialog"
      @close="showAssignDialog = false"
    >
      <!-- 权限点数据展示 -->
      <el-tree
        :data="permissionDataList"
        :props="defaultProps"
        :default-expand-all="true"
        :show-checkbox="true"
        :check-strictly="true"
        @check="handleNodeClick"
        node-key="id"
        ref="tree"
      ></el-tree>
      <template #footer>
        <div style="text-align: right">
          <el-button @click="closeAssignDialog">取消</el-button>
          <el-button type="primary" @click.native="submitPermission"
            >确定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, deletePeople, addRoleList, getPeopleDetail, updatePeopleDetail } from '@/api/setting'
import { getPermissionList, assignPerm, getRoleDetailById } from '@/api/permissions'
import { tranListToTreeData } from '@/utils/translist'
export default {
  // 组件名称
  name: 'setting',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      defaultProps: { label: 'name' },
      permissionDataList: [],
      showAssignDialog: false,
      title: '新增角色',
      roleForm: {
        name: "",
        description: ""
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ]
      },
      showDialog: false,
      peoplelist: [],
      page: {
        // 放置页码及相关数据
        page: 1,
        pagesize: 10,
        total: 0 // 记录总数
      },
      id: '',
      permIds: []
    }
  },
  created () {
    // 获取所有角色请求/更新角色列表
    this.getPeopleList()
  },
  methods: {
    // 获取选择的权限的id组成的数组,并赋值给this.permIds
    handleNodeClick (data, a) {
      this.permIds = a.checkedKeys
    },
    // 分配角色功能
    submitPermission () {
      assignPerm({ id: this.id, permIds: this.permIds }).then(res => {
        this.$message.success('分配成功')
        this.showAssignDialog = false
      })
    },
    async AssignPermissions (id) {
      this.id = id
      // 获取权限列表网络请求
      let ress = await getPermissionList()
      this.permissionDataList = tranListToTreeData(ress.data, '0')
      // 获取用户角色网络请求
      let res = await getRoleDetailById(id)
      this.showAssignDialog = true
      // 回显用户已经分配的角色
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(res.data.permIds)
      })
    },
    closeAssignDialog () {
      this.showAssignDialog = false
      this.$refs.tree.setCheckedKeys([])
    },
    // 获取所有角色列表网络请求方法
    getPeopleList () {
      getRoleList(this.page).then(res => {
        this.page.total = res.data.total
        this.peoplelist = res.data.rows
      })
    },
    // 列表分页方法
    currentChange (page) {
      this.curpage = page
      this.page.page = page
      this.getPeopleList()
    },
    // 删除角色方法
    deletPeople (data) {
      this.$confirm('确定删除此角色吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除角色请求
        deletePeople(data.id).then(res => {
          this.peoplelist === 1 && this.page.page > 1 && this.page.page--
          this.getPeopleList()
          this.$message.success('删除角色成功')
        })
      }).catch(() => { });
    },
    btnOK () {
      // 添加角色校验
      if (!this.roleForm.id) {
        this.$refs.roleForms.validate((valid) => {
          if (valid) {
            // 添加角色请求
            addRoleList(this.roleForm).then(res => {
              this.$message.success('添加成功')
              this.getPeopleList()
              this.showDialog = false
              this.roleForm = {
                name: "",
                description: ""
              },
                this.$refs.roleForms.resetFields()
            })
          } else {
            return false;
          }
        });
      } else {
        // 更新角色信息校验
        this.$refs.roleForms.validate((valid) => {
          if (valid) {
            // 更新角色信息请求
            updatePeopleDetail(this.roleForm).then(res => {
              this.$message.success('修改成功')
              this.getPeopleList()
              this.showDialog = false
              this.roleForm = {
                name: "",
                description: ""
              },
                this.$refs.roleForms.resetFields()
            })
          } else {
            return false;
          }
        });
      }
    },
    // 显示角色编辑输入框
    bianjiPeople (data) {
      this.showDialog = true
      this.title = '编辑角色'
      // 获取角色信息网络请求
      getPeopleDetail(data.id).then(res => {
        this.roleForm = res.data
      })
    },
    // 显示新增角色弹出框
    ShowDialog () {
      this.showDialog = true
      this.title = '新增角色'
    }
  }
}
</script>
<style scoped>
</style>

